<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import loginData from "@/components/pc/loginData.vue";
import { getDate } from "@/utils/getDate";
import { addData, user, isVipUser } from "@/api/api";
import { userAddData } from "@/type/api";
import { ElMessage } from 'element-plus'
// 获取当前时间
const { formattedDate } = getDate()
const dialogVisible = ref(false)
const loginDialogVisible = ref(false)
const isLogin = ref()
const title = ref('')
const userData = ref<userAddData>()
const textarea = ref('')
const num = ref<number | string>(1)
const userName = ref()
const mail = ref()
const item = ref()
const isVipUserData = ref()
const data = [
  { imgUrl: 'https://statics.huzhan.com/image/s_1_3.png' },
  { imgUrl: 'https://statics.huzhan.com/image/s_2.png!/format/webp/compress/true' }
]
//判断是否登录
const userLoginName = async () => {
  const res = await user({ mail: mail.value })
  if (res.data.code !== '200') {
    localStorage.setItem('token', '')
    localStorage.setItem('mail', '')
    isLogin.value = false
    return
  }
  isLogin.value = true
  userName.value = res.data.data.name
}
onMounted(async () => {
  mail.value = localStorage.getItem('mail') as string
  userLoginName()
  if(mail.value === '') return 
  isVip()
})
let dataisNull = (e: { text: string, type: string }) => {
  dialogVisible.value = false
  title.value = ''
  textarea.value = ''
  num.value = 1
  ElMessage({
    message: e.text,
    type: e.type as any,
    plain: true,
  })
}
const isNone = () => {
  dataisNull({ text: '取消添加', type: 'info' })
}
//检测是否是vip
const isVip = async () => {
  const res = await isVipUser({ id: mail.value })
  if (res.data.code === '200') {
    // 使用 "T" 作为分隔符来分割字符串
    const parts = res.data.data.split("T");
    item.value = parts[0]
    isVipUserData.value = true
    return
  }
  isVipUserData.value = false
}
//发布功能
const snedData = async () => {
  if (title.value !== '' && textarea.value !== '' && num.value !== '') {
    userData.value = { title: title.value, text: textarea.value, userid: localStorage.getItem('mail') as string, money: num.value, date: formattedDate.value }
    const res = await addData(userData.value)
    if (res.data.code === '404') {
      localStorage.setItem('mail', '')
      localStorage.setItem('token', '')
      dataisNull({ text: '请先登录，在进行发布', type: 'error' })
    } else if (res.data.code === '305') {
      dataisNull({ text: res.data.msg, type: 'error' })
    }
    if (res.data.code === '200'){ 
      dataisNull({ text: '添加成功', type: 'success' })
    }

  } else {
    dataisNull({ text: '添加失败，请输入标题，内容，金额', type: 'error' })
  }
}
const Cancel = (value: boolean) => {
  loginDialogVisible.value = value
}
const isLoginData = (e: boolean) => {
  window.location.reload();
}
</script>

<template>
  <loginData @update:isLogin="isLoginData" :loginDialogVisible @update:loginDialogVisible="Cancel"></loginData>
  <el-dialog :show-close="false" v-model="dialogVisible" title="通知" width="500" align-center>
    <el-form ref="ruleFormRef" style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm">
      <el-form-item label="发布标题：" prop="pass">
        <el-input v-model="title" placeholder="请输入一个吸引人的标题" />
      </el-form-item>
      <el-form-item label="发布内容：" prop="pass">
        <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请输入一个吸引人的内容" />
      </el-form-item>
      <el-form-item label="发布金额：" prop="pass">
        <el-input-number v-model="num" :min="1" :max="10000">
          <template #prefix>
            <span>￥</span>
          </template>
        </el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isNone">取消</el-button>
        <el-button type="primary" @click="snedData">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="content">
    <div class="block text-center" m="t-4">
      <el-carousel trigger="click" height="500px">
        <el-carousel-item v-for="item in data" :key="item">
          <img class="imgCar" :src="item.imgUrl" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="login">
      <div class="title">
        <div class="title-text">
          <h2>广告</h2>
          <h3>为投放而生!</h3>
        </div>
        <div class="selectData">
          <div class="iconAndText">
            <el-icon color="white" size="30">
              <WalletFilled />
            </el-icon>
            <p>广告投放</p>
          </div>
          <div class="iconAndText">
            <el-icon color="white" size="30"><Promotion /></el-icon>
            <p>账号交易</p>
          </div>
          <div class="iconAndText">
            <el-icon color="white" size="30"><Management /></el-icon>
            <p>投放教学</p>
          </div>
        </div>
      </div>
      <div class="data">
        <div class="imgAndlogin">
          <img class="imgData" src="https://iu.huzhan.com/sign/1475925035869.jpg" alt="">
          <div v-if="!isLogin" class="loginbtn">
            <p class="pbtn">您好，欢迎来到投放站！</p>
            <el-button class="btn" type="primary" round @click="loginDialogVisible = true">登录 / 注册</el-button>
          </div>
          <div v-if="isLogin" class="loginbtn">
            <h4 v-if="!isVipUserData">{{ userName }}(普通账户)</h4>
            <h4 class="vipColor" v-if="isVipUserData">{{ userName }}(会员账户)</h4>
            <p v-if="isVipUserData" class="vipP">到期时间：{{ item }}</p>
          </div>
        </div>
        <img class="ann" src="https://statics.huzhan.com/image/rtop-notice.png">
        <div class="anndata">
          <li v-for="i in 6">关于禁用TG（飞机）联系方式的通知</li>
        </div>
        <el-button class="sendData" type="primary" @click="dialogVisible = true" plain>发布需求</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url(../../assets/style/carousel.css);

.vipColor {
  color: red;
}

.vipP {
  font-size: 10px;
}
</style>